<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
            <div class="col-lg-9">
                <div class="tabs-container">
                    <ul class="nav nav-tabs" id="tab-list-2">
                        <li class="active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="search">
                            <div class="panel-body">
                                <form class="form-horizontal" id="ap_searchform">
                                    <div class="ibox-title"  style="border: none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                    </div>
                                    <div class="ibox-content">
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label">Fiscal Year</label>
                                                <div class="col-lg-5">
                                                    <input type="number" style="text-align:right;" name="fiscal_year_s" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label">Name</label>
                                                <div class="col-lg-5">
                                                    <input  name="period_name_s" type="text" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label">Status</label>
                                                <div class="col-lg-3">
                                                    <!-- <input type="text" name="status_s" class="form-control"> -->
                                                    <select name="status_s" class="form-control chosen">
                                                    <option>--</option>
                                                    <?php foreach ($gps as $key): ?>
                                                        <option value="<?php echo $key->status; ?>"><?php echo $key->meaning; ?></option>
                                                    <?php endforeach;?>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label"></label>
                                                <div class="col-lg-5">
                                                    <a href="javascript:document.getElementById('ap_searchform').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                                    <button class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" id="search-ap"> Search</button>
                                                </div>
                                            </div>
                                        </form>
                                        </div>
                                        <button data-toggle="tab" href="#add" class="btn btn-success btn-md m-t-n-xs add-tab-btn" id="add-ap-tab"> Add</button>
                                        <div class="ibox-content">
                                            <table class="table table-bordered table-compact">
                                                <thead>
                                                    <tr>
                                                        <th>Fiscal Year</th>
                                                        <th>Name</th>
                                                        <th>Status</th>
                                                        <th style="padding:8px;text-align:center;width:75px;">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="search-ap-result">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> <!-- End of iBox -->
                            </div>
                        </div>

        </div><!-- END of class row-->
    </div>
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function() {
        $(".chosen").chosen({width:"150px;"});
        $('#tab-list-2').on('click','#close-add-body',function(){
            var tabId = $(this).parents('li').children('a').attr('href');
            $(this).parents('li').remove('li');
            $(tabId).remove();
            $('#tab-list-2 a:first').tab('show');
            if(tabId == "#view"){
                $('#count_view').val('0');
            }else if(tabId == "#edit"){
                $('#count_edit').val('0');
            }else{
                $('#count_add').val('0');
            }
        });

        $('#add-ap-tab').click(function(){
             if($('#count_add').val() == 0){
                $('#tab-list-2').append('<li id="add-link"><a href="#add" role="tab" data-toggle="tab">Add<button id="addX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="add"><div class="panel-body"><div id="add_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#count_add').val('1');
                $("#add_data").load("<?php echo $this->session->userdata('forload') . '/add_gperiods'; ?>");
            }
            $('#tab-list-2 a[href="#add"]').tab('show');
        });

        $(document).on('click', '.btn.btn-primary.btn-outline.btn-sm.edit-tab', function(){
            var period_id = $(this).closest('tr').children('#period_id_v').text();
            if($('#count_edit').val() == 0){
                $('#tab-list-2').append('<li id="edit-link"><a href="#edit" role="tab" data-toggle="tab">Edit<button id="editX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="edit"><div class="panel-body"><div id="edit_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#edit-link').show();
                $('#count_edit').val('1');
            }
            $('#tab-list-2 a[href="#edit"]').tab('show');
            $("#edit_data").load("<?php echo $this->session->userdata('forload') . '/edit_gperiods/'; ?>"+period_id);
        });

        $(document).on('click', '.btn.btn-primary.btn-outline.btn-sm.view-tab', function(){
            var period_id = $(this).closest('tr').children('#period_id_v').text();
            if($('#count_view').val() == 0){
                $('#tab-list-2').append('<li id="view-link"><a href="#view" role="tab" data-toggle="tab">View<button id="close-add-body" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="view"><div class="panel-body"><div id="view_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#view-link').show();
                $('#count_view').val('1');
            }
            $("#view_data").load("<?php echo $this->session->userdata('forload') . '/view_gperiods/'; ?>"+period_id);
            $('#tab-list-2 a[href="#view"]').tab('show');
        });

        $('#search-ap').click(function(e){
            e.preventDefault();
            if($('input[name=fiscal_year_s]').val() == '' && $('input[name=period_name_s]').val() == '' && $('input[name=status_s]').val() == ''){
                notifymsg('danger','<b>Error:</b> Some Fields are empty.');
            }else{
                fetchData();
            }

        });

        function fetchData(){
            $('#search-ap-result').html('');
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/searchgp'); ?>",
                data: $('#ap_searchform').serialize(),
                dataType: 'json',
                success: function(e){
                    if(e == 'No results found.'){
                        notifymsg('success','<b>Success</b>: 0 Result Found.');
                        $('#search-ap-result').append("<td colspan='4' align='center'><h3>No Result Found</h3></td>");
                    }else{
                        var trHTML = '';
                        var count = 0;
                        $.each(e, function(i, item) {
                            var title, type;
                            if(e[i].status == 'P'){
                                title = 'Pending';
                                type = 'warning';
                            }
                            trHTML += '<tr><td id="bu_id_v" style="display:none;">'+e[i].bu_id+'</td><td id="period_name_v" style="display:none;">'+e[i].period_name+'</td><td id="period_id_v" style="display:none;">'+e[i].period_id+'</td><td id="status_v" style="display:none;">'+e[i].status+'</td><td id="fiscal_year_v" align="right">'+e[i].fiscal_year+'</td><td id="period_name_v">'+e[i].period_name+'</td><td align="center"><span class="label label-'+type+'">'+title+'</span></td><td align="center"><button type="button" class="btn btn-sm btn-primary btn-xs btn-outline edit-tab" data-toggle="tab" href="#edit" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button type="button" class="btn btn-outline btn-sm btn-primary btn-xs view-tab" data-toggle="tab" role="tab" href="#view-3" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                            count++;
                        });
                        notifymsg('success','<b>Success</b>:'+ count +' Result Found.');
                        $('#search-ap-result').append(trHTML);
                    }
                },
                beforeSend: function(){
                    $('#search-ap').attr('disabled',true);
                },
                complete: function(){
                    $('#search-ap').removeAttr('disabled');
                }
            });
        }

        $('#start-date .input-group.date').datepicker({
            startView: 1,
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: "dd-M-yyyy"
        });
        $('#end-date .input-group.date').datepicker({
            startView: 1,
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: "dd-M-yyyy"
        });
        $('#data_5 .input-daterange').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true
        });

    });
</script>